<template>
  <h3>我是app组件</h3>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为:{{ msg }}</h2>
  <button @click="msg+='!'">修改信息</button>
  <hr>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <hr>
  <h2>展示薪水:{{person.job.j1.salery}}K</h2>
  <button @click="person.job.j1.salery++">涨薪</button>
</template>

<script>
import {ref, watch, reactive} from "vue";

export default {
  name: 'Demo',
  // TODO  简写形式
  /* watch: {
   /!* sum(newvalue, oldvalue) {
      console.log('sum的值变化了', newvalue, oldvalue)
    },*!/
    //TODO   非简写形式
    sum: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        console.log('sum的值变化了', newValue, oldValue)
      }
    }
  },*/
  setup() {
    //数据
    let sum = ref(0)
    let msg = ref('你好啊!!')
    let person = reactive({
      name: '张三',
      age: 18,
      job:{
        j1:{
          salery:20
        }
      }
    })
//TODO 监视一:监视ref所绑定的一个响应式的数据
    /*watch(sum,(newValue,oldValue)=>{
      console.log(`sum的值改变了${newValue},${oldValue}`)
    },{immediate:true})*/
//TODO 监视二:监视ref所绑定的多个响应式的数据
    /* watch([sum,msg],(newValue,oldValue)=>{
       console.log(`sum和msg的值都改变了,${newValue},${oldValue}`)
     })*/
//TODO 监视三:监视reactive所绑定的对象实现响应式的数据,此处无法正确获取oldValue=>且无法关闭深度监视(默认开启了深度监视)
   /* watch(person,(newValue,oldValue)=>{
      console.log(`person变化了${newValue}${oldValue}`)
    },{deep:false})*/
//TODO 监视四:监视reactive所绑定的对象中的某个属性,写成一个函数,用返回值
  /*  watch(()=>person.age,(newValue,oldValue)=>{
      console.log(`person变化了${newValue}${oldValue}`)
    })*/
//TODO 监视五:监视reactive所绑定的对象中的某些属性,写成一个函数,用返回值
    /*watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
      console.log(`person变化了${newValue}${oldValue}`)
    })*/
//TODO 特殊情况:监视reactive所绑定的对象中的job,写成一个函数,用返回值
      watch(()=>person.job,(newValue,oldValue)=>{
        console.log(`person变化了${newValue}${oldValue}`)
      },{deep:true})

    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>
</style>
